<template>
	<view class="qastart_pages" :style="isShowPage?'background-color: #00A0DC;':''">
		<image class="qastart_bk_img" :src="info.img" mode="widthFix" @load="loadBkImg"></image>
		<block v-if="isShowPage">
			<view class="qa_left_top_box">
				<view class="f-9 c-666666 text-c" @click="showRule">
					<image class="qa_left_top_icon" :src="onlinePic+'answer/rule_icon.png'"></image>
					<view>规则</view>
				</view>
				<view class="f-9 c-666666 text-c mt-10" @click="showRank">
					<image class="qa_left_top_icon" :src="onlinePic+'answer/ranking_icon.png'"></image>
					<view>排行榜</view>
				</view>
			</view>
			<view class="qa_start_btn_box">
				<view @click="goQalist" class="qa_start_button">
					{{info.button?info.button.name:'立即挑战'}}
				</view>
				<view v-if="info.button1" class="qa_record_text" @click="goQarecord">{{info.button1.name}}</view>
			</view>
			<view v-if="time>0" class="time_badge" @click="goQalist">{{time}}s</view>
		</block>
		<view v-if="isShowRule||isShowRank" class="mask_box" @click="closePopup"></view>
		<view v-if="isShowRule" class="rule_popup_box">
			<view class="rule_popup">
				<view class="rule_popup_title">规则说明</view>
				<view class="rule_popup_content_box">
					<view class="rule_popup_text">
						<text>{{info.desc}}</text>
					</view>
				</view>
				<view class="display_flex" style="justify-content: center;">
					<view class="rule_popup_btn" @click="closePopup">我知道了</view>
				</view>
			</view>
			<view class="rule_popup_close" @click="closePopup">
				<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
			</view>
		</view>

		<view v-if="isShowRank" class="rank_popup_box">
			<view class="rank_popup">
				<view class="rule_popup_title">排行榜</view>
				<view class="rank_popup_table_head">
					<uni-row>
						<uni-col :span="5">
							<view class="text-c c-999999">排名</view>
						</uni-col>
						<uni-col :span="9">
							<view class="text-c c-999999">用户</view>
						</uni-col>
						<uni-col :span="10">
							<view class="text-c c-999999">成绩</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="rank_popup_oneself">
					<uni-row>
						<uni-col :span="5">
							<view class="text-c c-999999">{{rankinfo.ranking}}</view>
						</uni-col>
						<uni-col :span="9">
							<view class="c-5F809F display_flex">
								<view class="avatar_box">
									<image class="avatar"
										:src="rankinfo.avatar?picUrl+rankinfo.avatar:onlinePic+'avatar.png'"></image>
								</view>
								<view class="ml-5 ellipsis f-13">{{rankinfo.username}}</view>
							</view>
						</uni-col>
						<uni-col :span="10">
							<view class="text-c f-13 c-5F809F">{{rankinfo.time}}秒</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="rank_popup_link_box">
					<image class="rank_popup_link" :src="onlinePic+'answer/link_block.png'" mode="widthFix"></image>
				</view>
				<view class="rank_popup_other">
					<view v-for="(item,index) in list" :key="item.num">
						<view v-if="index==0" class="rank_popup_first">
							<uni-row>
								<uni-col :span="5">
									<view class="text-c">
										<image class="rank_list_icon" :src="onlinePic+'answer/first.png'"></image>
									</view>
								</uni-col>
								<uni-col :span="9">
									<view class="c-5F809F display_flex">
										<view class="avatar_box">
											<image class="avatar"
												:src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'"></image>
										</view>
										<view class="ml-5 ellipsis f-13">{{item.username}}</view>
									</view>
								</uni-col>
								<uni-col :span="10">
									<view class="text-c c-5F809F f-13">{{item.time}}</view>
								</uni-col>
							</uni-row>
						</view>
						<view v-if="index==1" class="rank_popup_second">
							<uni-row>
								<uni-col :span="5">
									<view class="text-c">
										<image class="rank_list_icon" :src="onlinePic+'answer/second.png'"></image>
									</view>
								</uni-col>
								<uni-col :span="9">
									<view class="c-5F809F display_flex">
										<view class="avatar_box">
											<image class="avatar"
												:src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'"></image>
										</view>
										<view class="ml-5 ellipsis f-13">{{item.username}}</view>
									</view>
								</uni-col>
								<uni-col :span="10">
									<view class="text-c c-5F809F f-13">{{item.time}}</view>
								</uni-col>
							</uni-row>
						</view>
						<view v-if="index==2" class="rank_popup_third">
							<uni-row>
								<uni-col :span="5">
									<view class="text-c">
										<image class="rank_list_icon" :src="onlinePic+'answer/third.png'"></image>
									</view>
								</uni-col>
								<uni-col :span="9">
									<view class="c-5F809F display_flex">
										<view class="avatar_box">
											<image class="avatar"
												:src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'"></image>
										</view>
										<view class="ml-5 ellipsis f-13">{{item.username}}</view>
									</view>
								</uni-col>
								<uni-col :span="10">
									<view class="text-c c-5F809F f-13">{{item.time}}</view>
								</uni-col>
							</uni-row>
						</view>
						<view v-if="index>2" class="rank_popup_cell">
							<uni-row>
								<uni-col :span="5">
									<view class="text-c c-999999">{{index+1}}</view>
								</uni-col>
								<uni-col :span="9">
									<view class="c-999999 display_flex">
										<view class="avatar_box">
											<image class="avatar"
												:src="item.avatar?picUrl+item.avatar:onlinePic+'avatar.png'"></image>
										</view>
										<view class="ml-5 ellipsis f-13">{{item.username}}</view>
									</view>
								</uni-col>
								<uni-col :span="10">
									<view class="text-c c-999999 f-13">{{item.time}}</view>
								</uni-col>
							</uni-row>
							<view class="rank_bot_line"></view>
						</view>
					</view>
				</view>
				<view class="rank_popup_close" @click="closePopup">
					<uni-icons type="close" color="#ffffff" size="40"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQaInfo,
		getrankList
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				info: '',
				rankinfo: '',
				list: [],
				time: 0,
				subject_id: 0,
				channel: '',
				bottomheight: 40,
				topPerc: '90%',
				timerd: '',
				timeout: '',
				isShowRule: false,
				isShowRank: false,
				isShowPage: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {
			if (uni.getStorageSync('onload')) {
				this.getQaInfo()
				this.getrankList()
				uni.removeStorage({
					key: 'onload',
				})
			}
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}

		},
		onLoad(options) {
			uni.showLoading({})
			this.subject_id = options.subject_id
			this.channel = options.channel ? options.channel : ''
			this.topPerc = uni.getSystemInfoSync().statusBarHeight > 30 ? '100%' : '90%'
			if (uni.getStorageSync('access_token')) {
				this.getQaInfo()
				this.getrankList()
			}else{
				uni.hideLoading()
			}
		},
		methods: {
			getQaInfo() {
				getQaInfo({
					channel: this.channel,
					subject_id: this.subject_id,
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data
						this.time = res.data.time
						uni.setNavigationBarTitle({
							title: res.data.top
						})
						uni.hideLoading()
						var params = {
							event_code: '答题开屏',
							event_id: this.subject_id,
							title: res.data.title,
							value: '',
							path: 'pages/qa/qastart/qastart',
						}
						app.BurialPoint(params)
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			loadBkImg() {
				var that = this
				that.isShowPage = true
				if (that.time > 0) {
					that.timeout = setTimeout(() => {
						uni.redirectTo({
							url: that.info.button.url
						})
					}, that.time * 1000);
					var time = that.info.time
					that.timerd = setInterval(function() {
						if (time > 1) {
							time--
							that.time = time
						}
					}, 1000);
				}
			},
			getrankList() {
				getrankList({
					channel: this.channel,
					subject_id: this.subject_id,
					type: 1,
				}).then(res => {
					if (res.state == 1) {
						this.list = res.data.info.list
						this.rankinfo = res.data.info.info
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			goQalist() {
				if (this.timeout) {
					clearTimeout(this.timeout)
				}
				uni.redirectTo({
					url: this.info.button.url
				})
				var params = {
					event_code: '答题开屏-立即参与',
					event_id: this.info.id,
					title: this.info.title,
					value: '',
					path: 'pages/qa/qastart/qastart',
					source_page: '答题开屏-立即参与',
				}
				app.BurialPoint(params)
			},
			goQarecord() {
				uni.navigateTo({
					url: this.info.button1.url
				})
				var params = {
					event_code: '答题开屏',
					event_id: this.info.id,
					title: this.info.title,
					value: '',
					source_page: '答题开屏-参赛记录',
					path: 'pages/qa/qastart/qastart',
				}
				app.BurialPoint(params)
			},
			showRule() {
				this.isShowRule = true
				var params = {
					event_code: '答题开屏',
					event_id: this.info.id,
					title: this.info.title,
					value: '',
					source_page: '答题开屏-规则',
					path: 'pages/qa/qastart/qastart',
				}
				app.BurialPoint(params)
			},
			showRank() {
				this.isShowRank = true
				var params = {
					event_code: '答题开屏',
					event_id: this.info.id,
					title: this.info.title,
					value: '',
					source_page: '答题开屏-排行榜',
					path: 'pages/qa/qastart/qastart',
				}
				app.BurialPoint(params)
			},
			closePopup() {
				this.isShowRule = false
				this.isShowRank = false
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.title ? this.info.title : '答题',
				imageUrl: this.info.share_img ? this.info.share_img : '',
				path: '/pages/qa/qastart/qastart?subject_id=' + this.subject_id + '&channel=' + this.channel
			}
		},
	}
</script>

<style lang="scss">
	// page {
	// background-color: #00A0DC;	
	// }

	.qastart_pages {
		height: 100vh;
		position: relative;

		.qastart_bk_img {
			width: 100%;
			vertical-align: middle;
		}

		.qa_left_top_box {
			position: absolute;
			top: 40rpx;
			left: 50rpx;

			.qa_left_top_icon {
				width: 53rpx;
				height: 53rpx;
			}
		}

		.qa_start_btn_box {
			position: absolute;
			top: 73%;
			left: 0;
			right: 0;

			.qa_start_button {
				color: #00A0DC;
				width: auto;
				padding: 26rpx 0;
				font-size: 40rpx;
				text-align: center;
				border-radius: 50rpx;
				margin-left: 85rpx;
				margin-right: 85rpx;
				background-color: #FFFFFF;
			}

			.qa_record_text {
				color: #ffffff;
				font-size: 30rpx;
				margin-top: 30rpx;
				text-align: center;
				text-decoration: underline;
			}
		}


		.qaback_img {
			width: 100%;
			height: 100vh;
			background-position: top;
			background-size: cover;
			overflow: hidden;
			text-align: center;
		}

		.open_top_logo {
			width: 300rpx;
			height: 150rpx;
			margin-top: 35%;
		}

		.time_badge {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-size: 26rpx;
			position: fixed;
			float: right;
			right: 40rpx;
			top: 40rpx;
			border-radius: 60px;
			background-color: rgba(21, 168, 223, 0.5);
		}
	}
</style>